<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('问题评价')" />
    <link href="/css/star/application.css" th:href="@{/css/star/application.css}" rel="stylesheet"/>

</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-dfQuestion-edit" th:object="${dfQuestion}">
        <input id="id" name="id" th:field="*{id}"  type="hidden">

        <div>
            <ul>
                <li class="wttw_head">问题评分</li>
            </ul>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8">
            <textarea  name="comment"  class="form-control" type="text"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div id="approve-div" style="margin-left: 25px; margin-top: 20px;">
                <label class="col-sm-3 control-label">满&emsp;意&emsp;度：</label>
                <div class="col-sm-8" style="padding-top: 3px; padding-left: 0px;">
                    <div class="demo">
                        <div id="size-demo">
                            <input type="hidden" id="commentScore" name="commentScore">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group" style="overflow: hidden; padding-top: 15px; border-top: dashed 1px #ec0000 ; ">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8">
                <button type="button" onclick="resolved()" style="width: 120px; height: 30px; border: 0; background: #55abef; color: #fff; border-radius: 12px; float: right; font-size: 16px; line-height: 30px;">评&emsp;价</button>
            </div>
        </div>

    </form>

</div>


<div th:include="include::footer"></div>
<script src="/js/star/jquery.raty.min.js" th:src="@{/js/star/jquery.raty.min.js}"></script>
<script type="text/javascript">
    var id = $("#id").val();
    var prefix = ctx + "question/dfQuestion";

    $(function () {
        $.fn.raty.defaults.path = 'lib/img';
        $('#default-demo').raty();
        $('#score-demo').raty({
            score: 3
        });
        $('#number-demo').raty({
            number: 10
        });
        $('#numberMax-demo').raty({
            numberMax: 5,
            number: 500
        });
        $('#number-callback-demo').raty({
            number: function() {
                return $(this).attr('data-number')
            }
        });
        $('#scoreName-demo').raty({
            scoreName: 'entity[score]'
        });
        $('#readOnly-demo').raty({
            readOnly: true,
            score: 3
        });
        $('#readOnly-callback-demo').raty({
            readOnly: function() {
                return 'true becomes readOnly' == 'true becomes readOnly'
            }
        });
        $('#noRatedMsg-demo').raty({
            readOnly: true,
            noRatedMsg: "I'am readOnly and I haven't rated yet!"
        });
        $('#score-callback-demo').raty({
            score: function() {
                return $(this).attr('data-score')
            }
        });
        $('#halfShow-true-demo').raty({
            score: 3.26
        });
        $('#halfShow-false-demo').raty({
            halfShow: false,
            score: 3.26
        });
        $('#half-demo').raty({
            half: true
        });
        $('#starHalf-demo').raty({
            path: 'img',
            half: true,
            starOff: 'cookie-off.png',
            starOn: 'cookie-on.png',
            starHalf: 'cookie-half.png'
        });
        $('#round-demo').raty({
            round: {
                down: .26,
                full: .6,
                up: .76
            },
            score: 3.26
        });
        $('#click-demo').raty({
            click: function(score, evt) {
                alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type)
            }
        });
        $('#hints-demo').raty({
            hints: ['a', null, '', undefined, '*_*']
        });
        $('#cancel-demo').raty({
            cancel: true
        });
        $('#cancelHint-demo').raty({
            cancel: true,
            cancelHint: 'My cancel hint!'
        });
        $('#cancelPlace-demo').raty({
            cancel: true,
            cancelPlace: 'right'
        });
        $('#star-off-and-star-on-demo').raty({
            path: 'img',
            starOff: 'off.png',
            starOn: 'on.png'
        });
        $('#cancel-off-and-cancel-on-demo').raty({
            path: null,
            cancel: true,
            cancelOff: 'img/cancel-custom-off.png',
            cancelOn: 'img/cancel-custom-on.png',
            starOn: 'lib/img/star-on.png',
            starOff: 'lib/img/star-off.png'
        });
        $('#iconRange-demo').raty({
            path: 'img',
            iconRange: [{
                range: 1,
                on: '1.png',
                off: '0.png'
            }, {
                range: 2,
                on: '2.png',
                off: '0.png'
            }, {
                range: 3,
                on: '3.png',
                off: '0.png'
            }, {
                range: 4,
                on: '4.png',
                off: '0.png'
            }, {
                range: 5,
                on: '5.png',
                off: '0.png'
            }]
        });
        $('#size-demo').raty({
            path: '/img',
            // cancel: true,
            // cancelOff: 'off.png',
            // cancelOn: 'on.png',
            half: true,
            size: 24,
            starHalf: 'star-half-big.png',
            starOff: 'star-off-big.png',
            starOn: 'star-on-big.png'
        });
        $('#width-demo').raty({
            width: 150
        });
        $('#target-div-demo').raty({
            cancel: true,
            target: '#target-div-hint'
        });
        $('#target-text-demo').raty({
            cancel: true,
            target: '#target-text-hint'
        });
        $('#target-textarea-demo').raty({
            cancel: true,
            target: '#target-textarea-hint'
        });
        $('#target-select-demo').raty({
            cancel: true,
            target: '#target-select-hint'
        });
        $('#targetType-demo').raty({
            cancel: true,
            target: '#targetType-hint',
            targetType: 'score'
        });
        $('#targetKeep-demo').raty({
            cancel: true,
            target: '#targetKeep-hint',
            targetKeep: true
        });
        $('#targetText-demo').raty({
            target: '#targetText-hint',
            targetText: '--'
        });
        $('#targetFormat-demo').raty({
            target: '#targetFormat-hint',
            targetFormat: 'Rating: {score}'
        });
        $('#mouseover-demo').raty({
            mouseover: function(score, evt) {
                alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type)
            }
        });
        $('#mouseout-demo').raty({
            mouseout: function(score, evt) {
                alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type)
            }
        });
        $('#precision-demo').raty({
            // path: 'img',
            // cancelOff: 'off.png',
            // cancelOn: 'on.png',
            size: 24,
            starHalf: 'star-half-big.png',
            starOff: 'star-off-big.png',
            starOn: 'star-on-big.png',
            target: '#precision-hint',
            cancel: true,
            targetKeep: true,
            precision: true
        });
        $('#space-demo').raty({
            space: false
        });
        $('#single-demo').raty({
            single: true
        });
        $('#function-demo').raty({
            path: 'img',
            // cancelOff: 'off.png',
            // cancelOn: 'on.png',
            size: 24,
            starHalf: 'star-half-big.png',
            starOff: 'star-off-big.png',
            starOn: 'star-on-big.png',
            target: '#function-hint',
            cancel: true,
            targetKeep: true,
            precision: true,
            click: function(score, evt) {
                alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type)
            }
        });
        $('#score-action').on('click', function() {
            $('#function-demo').raty('score', $('#score-function-demo').val())
        });
        $('#click-action').on('click', function() {
            $('#function-demo').raty('click', $('#click-function-demo').val())
        });
        $('#readOnly-action').on('click', function() {
            var isReadOnly = $('#readOnly-function-demo').val() === 'true' ? true : false;
            $('#function-demo').raty('readOnly', isReadOnly)
        });
        $('#cancel-action').on('click', function() {
            var isTrigger = $('#cancel-function-trigger-demo').val() === 'true' ? true : false;
            $('#function-demo').raty('cancel', isTrigger)
        });
        $('#reload-action').on('click', function() {
            $('#function-demo').raty('reload')
        });
        $('#score-get-action').on('click', function() {
            alert('score: ' + $('#function-demo').raty('score'))
        });
        $('#score-set-action').on('click', function() {
            var score = $('#score-set-function-demo').val();
            $('#function-demo').raty('score', score)
        });
        $('#set-action').on('click', function() {
            var options = $('#set-function-demo').val(),
                command = "$('#function-demo').raty('set', " + options + ");";
            eval(command)
        });
        $('#destroy-action').on('click', function() {
            $('#function-demo').raty('destroy')
        })

        $('#star').raty({

            cancel   : false,

            half     : true,

            size     : 24,

            starHalf : 'star-half-big.png',

            starOff  : 'star-off-big.png',

            starOn   : 'star-on-big.png'

        });

    })

    function resolved() {

        var score = $("#size-demo input[name='score']").val();
        var lastScore= parseFloat(score)*2;
        $("#commentScore").val(lastScore);
        $.operate.save(prefix + "/saveComment", $('#form-dfQuestion-edit').serialize());
        //$.modal.close();
    }
</script>
</body>
</html>
